<template>
	<div class="app-container">
		<el-steps :active="active" process-status="finish" finish-status="success" simple>
			<el-step title="选择生成页面对象" />
			<el-step title="选择Api接口" />
			<el-step title="生成页面" />
		</el-steps>
		<Parseopenapi v-model="pageInfo" v-show="active == 0" v-if="loaded == true" @prev="prev" @next="next" />
		<Selectapiapi v-model="pageInfo" v-show="active == 1" v-if="loaded == true" @prev="prev" @next="next" />
		<Genpage v-model="pageInfo" v-show="active == 2" v-if="loaded == true" @prev="prev" @next="next" />
		<!--
    <GoodsInfo
      v-show="active == 1"
      v-model="goodsInfo"
      v-if="loaded == true"
      @prev="prev"  
      @next="next"
    />-->
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { useRoute } from 'vue-router';

import Parseopenapi from './components/parseopenapi.vue';
import Selectapiapi from './components/selectapi.vue';
import Genpage from './components/genpage.vue';

const route = useRoute();

const state = reactive({
	loaded: false,
	active: 0,
	pageInfo: { openapiData: null, tag: '', op: '', urls: [], listApi: '', addApi: '', updateApi: '', deleteApi: '', getApi: '' } as any
});
const { loaded, active, pageInfo } = toRefs(state);

function prev() {
	if (state.active-- <= 0) {
		state.active = 0;
	}
}
function next() {
	if (state.active++ >= 3) {
		state.active = 0;
	}
}
onMounted(() => {
	state.loaded = true;
});
</script>

<style lang="scss" scoped>
.app-container {
	width: 95%;
	margin: 5px auto;
	border: 1px solid #eee;
}
</style>
